<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_事件监听</title>
</head>
<body>
<button onclick="alert('点击了按钮1')">按钮1</button>
<button id="btn">按钮2</button>

<hr>
<h4>今天星期一</h4>
<span>啊啊啊啊啊啊啊</span>
<h4>明天星期二</h4>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi architecto beatae, blanditiis cum
        cupiditate ducimus eaque exercitationem fuga illum modi nam nostrum obcaecati odio pariatur placeat!
        Dolores, eum unde! Nemo?
    </div>
    <div>Accusamus adipisci alias amet beatae culpa doloribus eos facere ipsam ipsum magnam omnis, optio quae quas
        quidem recusandae reiciendis similique tempore vel vero voluptatum. Accusamus distinctio enim laboriosam
        nulla pariatur!
    </div>
    <div>Corporis expedita libero nam repellat. Animi aperiam assumenda commodi culpa dignissimos dolor doloribus
        ducimus eaque, eos et exercitationem facilis fugiat ipsum minima nihil, obcaecati quae repellendus sed ut
        voluptatibus voluptatum.
    </div>
    <div>Atque eos minima numquam pariatur unde voluptas voluptates. Aspernatur cumque ea illo illum molestiae?
        Aspernatur deserunt enim fugit, illo modi mollitia nobis quaerat quia quibusdam quo, quos sunt temporibus
        tenetur.
    </div>
    <div>Accusantium aut cum distinctio facere magni non nulla pariatur quam quidem quos. Asperiores at beatae
        delectus deserunt dignissimos, dolore eius ex molestiae mollitia odit omnis provident, repudiandae sed,
        suscipit velit?
    </div>
    <div>A alias, amet aspernatur consequatur cupiditate dicta distinctio est expedita facilis fuga fugit impedit
        incidunt ipsum, neque nihil non optio porro, possimus quaerat quas quibusdam quisquam reiciendis sunt vel
        voluptatum?
    </div>
    <div>Amet animi consequatur consequuntur fuga harum, illo itaque, iusto libero molestias nisi porro ratione
        reiciendis rem repellendus sit totam, veritatis voluptate. Ab animi consequatur est expedita itaque non sint
        veniam.
    </div>
    <div>Aliquam amet est ipsum itaque, iure nesciunt nostrum nulla perferendis qui repellat saepe, tempore vero.
        Dignissimos dolorem esse et inventore maxime nulla, quas repellendus sint vel veritatis! Asperiores
        exercitationem, temporibus?
    </div>
    <div>Fugiat nesciunt officia sed. Adipisci aliquam architecto aut cumque dolore ea earum et ex explicabo facilis
        illo iusto laudantium modi nihil quibusdam quo quod reiciendis saepe, suscipit temporibus vel vitae.
    </div>
    <div>Ad atque delectus deleniti ex expedita ipsam, non repudiandae sit tenetur voluptatum! At autem deleniti
        dicta esse, facere maxime nam provident quae quaerat quibusdam quo repellendus repudiandae saepe, sunt
        velit.
    </div>
    <div>Architecto, at deserunt ex excepturi, exercitationem magnam nihil odio provident quisquam quo repellendus
        saepe vitae voluptate! Aliquid animi cumque dolores eum ipsam magnam maiores, nihil, numquam odit optio
        quaerat quam?
    </div>
    <div>Consectetur corporis dolor doloremque ea eius et libero neque officiis pariatur quas! At consectetur
        consequuntur, ea et fugit impedit incidunt ipsa, maiores minus nihil porro quas quibusdam reprehenderit
        saepe voluptates.
    </div>
    <div>Ab aliquid aut fugit id nemo tempora vero voluptates! Aliquam corporis dignissimos eligendi facilis fugit
        ipsa ipsam minima nulla odio officiis praesentium quidem ratione sunt, vel voluptatum. Eius, quasi, quis?
    </div>
    <div>Illo iure quas quos? Accusantium at dolorem esse fuga illo in minus nulla officia totam? Eum facilis illum
        non numquam perspiciatis placeat quam tempora! Atque dolorum eum id quibusdam voluptatibus.
    </div>
    <div>Architecto ducimus et explicabo fuga ipsam laboriosam minus mollitia, neque nobis quae quis repudiandae
        saepe sequi, temporibus velit veniam, vitae. Doloremque doloribus explicabo fuga id, iusto nam nihil sed
        temporibus.
    </div>
    <div>Aperiam, commodi consequatur dicta ea eaque eius et ex expedita illo itaque labore modi molestiae
        obcaecati, quae saepe temporibus veritatis vitae. Enim impedit ipsum, nam quaerat saepe temporibus vel
        veritatis!
    </div>
    <div>Eligendi, in molestiae sequi temporibus velit veniam vero. Amet commodi error explicabo laborum modi
        necessitatibus nisi obcaecati, odio praesentium veritatis? Aspernatur aut dolor et nulla pariatur quasi
        reprehenderit unde voluptate.
    </div>
    <div>Accusantium distinctio iusto laborum magni nisi placeat rerum tenetur! Consectetur debitis enim magni
        tenetur. Aperiam aspernatur blanditiis cumque distinctio fuga illo, iusto nihil nulla quae quam quidem quos
        voluptate voluptatum?
    </div>
    <div>Animi ipsam ipsum magni maxime molestiae natus nihil odit quod, ratione saepe sed velit, vero vitae. Animi
        dolore mollitia veritatis. Assumenda atque cupiditate deleniti dignissimos fugiat praesentium provident
        quisquam tempore!
    </div>
    <div>Accusamus accusantium aliquid consequuntur dolore doloremque ducimus eligendi error esse, et expedita
        facilis illum ipsa magnam, magni nemo nesciunt nostrum optio praesentium quibusdam quis quod rem sed tenetur
        totam ut.
    </div>
    <div>Asperiores, atque aut beatae deserunt dicta ex facilis numquam officia omnis quaerat quisquam, sequi sint
        tempore voluptate voluptates. Dolore eius minus ratione saepe. Cupiditate dicta et iure officiis repellat,
        vel.
    </div>
    <div>Aliquid beatae, dolorum eligendi esse ex nisi quae quis saepe sunt totam. Adipisci atque commodi culpa
        distinctio dolor ea facilis, fugit in laborum magni minus necessitatibus ratione sequi velit voluptatibus?
    </div>
    <div>A ab accusamus at autem cumque dignissimos distinctio exercitationem facilis fuga fugit illum labore libero
        magni maiores nemo odio officia placeat porro quia reiciendis repellendus reprehenderit sapiente sit, vel
        velit?
    </div>
    <div>Ad debitis, dolorem ea eius enim eum incidunt iste quidem quod rem! Aut necessitatibus, sint! Amet aperiam
        culpa cumque, dolor eos facilis id molestiae mollitia, nemo omnis qui quibusdam, vitae.
    </div>
    <div>Commodi consequuntur dicta distinctio, dolore doloribus ducimus earum error ipsa iusto maiores maxime
        mollitia nostrum quas quibusdam repellat sed sequi tempore totam voluptate voluptatem! Accusamus eligendi
        enim ipsum repellat sint!
    </div>
    <div>Amet asperiores atque aut commodi cupiditate delectus dolor dolorum eius enim est excepturi fugiat illo
        illum inventore, iste maiores nisi nulla pariatur porro possimus rerum soluta unde vel, veritatis
        voluptatibus.
    </div>
    <div>A accusamus alias beatae cupiditate deserunt dolorem in labore laboriosam minima minus nobis nostrum
        possimus praesentium quae quaerat quam qui quibusdam quod repellendus, rerum soluta suscipit, velit
        voluptate voluptatibus voluptatum.
    </div>
    <div>Ab asperiores debitis eaque error ipsa libero minus molestiae quisquam soluta tenetur. Adipisci aperiam
        dolorem odio velit voluptatibus! Debitis, dolore ducimus error et harum illum inventore labore odit
        praesentium repudiandae?
    </div>
    <div>A aut dicta esse ex excepturi exercitationem expedita fugiat ipsam iste maiores molestias natus neque
        numquam officia officiis quae quaerat quidem quis quos repellat repudiandae, saepe similique ullam veritatis
        voluptatum.
    </div>
    <div>Fugiat molestias officiis quos rem suscipit! Accusantium aliquam architecto asperiores aut beatae cumque
        earum est, ex excepturi harum iusto labore molestias porro sunt, tempore voluptates, voluptatibus. Accusamus
        autem nulla voluptatibus.
    </div>
    <div>Consectetur corporis distinctio exercitationem, illum neque perspiciatis quasi? Ab aliquid animi culpa
        dolor ea excepturi, exercitationem explicabo facilis, iure libero maiores nemo nesciunt non provident quasi
        unde vitae! Enim, voluptatibus?
    </div>
    <div>Ab accusantium autem cum deleniti dolor ducimus esse, eveniet excepturi incidunt itaque laborum maiores,
        perferendis ratione repudiandae soluta tenetur voluptates. Assumenda blanditiis dignissimos distinctio
        ducimus eveniet nam porro quas vitae!
    </div>
    <div>Architecto consectetur deserunt dolores eius error nostrum nulla praesentium quas quis, sequi sit, sunt?
        Amet at cum, dolorem ea eligendi harum in ipsum maxime modi, nemo qui quis, similique sit.
    </div>
    <div>Architecto consequatur, deserunt doloribus dolorum eius eum, in ipsum libero modi natus omnis optio quaerat
        quibusdam quisquam quod rerum tempore voluptatem? Asperiores, cum quasi. Ad culpa illo odit soluta ullam?
    </div>
    <div>A asperiores aut culpa, dignissimos eveniet ex iure, nobis numquam omnis pariatur rem repudiandae soluta,
        suscipit totam velit veniam voluptate. A, dicta dolorem eius error id molestiae nam odit tempore?
    </div>
    <div>Adipisci atque cumque dicta dolorem doloribus dolorum eius est excepturi explicabo fuga in inventore
        mollitia placeat praesentium quam, quasi quisquam rerum sequi similique sint suscipit vel voluptatibus!
        Dolorum laboriosam, quo?
    </div>
    <div>Ab esse fugiat inventore ipsa quae rem similique temporibus tenetur ut! A explicabo illo molestiae quod?
        Autem cum excepturi facere facilis id incidunt ipsam maxime nostrum, quasi quod sint vero.
    </div>
    <div>Alias debitis deleniti ea hic iste neque. Corporis deserunt dicta eligendi facilis, hic inventore iusto
        odio officiis omnis quia repellat reprehenderit sapiente sequi suscipit unde, ut, veniam. Quidem quos, rem?
    </div>
    <div>Aliquid atque delectus dolores dolorum esse eveniet facere laboriosam minus mollitia nesciunt nihil
        quisquam reiciendis, rem tempore vel. Ab beatae neque odio officiis perferendis quae quasi quia sit!
        Consectetur, veritatis!
    </div>
    <div>Accusantium aliquid aperiam at aut, corporis ducimus, ex harum laudantium magni molestias neque nostrum
        quas soluta sunt tenetur velit, vitae voluptas voluptatibus? Accusantium at debitis eaque, exercitationem
        fugiat voluptatem voluptatibus.
    </div>
    <div>Accusamus ad atque non numquam odio perferendis placeat quam qui quisquam rerum. Beatae consequatur
        deserunt, ducimus enim eos facere impedit incidunt iusto magnam non quia quod reprehenderit suscipit vel
        voluptates.
    </div>
    <div>Ad consequatur in magnam nisi quis. Accusantium animi aperiam asperiores at dolore eius ex harum hic ipsam
        laboriosam maiores necessitatibus, nesciunt, nobis nostrum odio officiis praesentium quidem quis reiciendis
        totam.
    </div>
    <div>Cupiditate doloremque error est exercitationem quod unde vel vero voluptate. Ad alias architecto doloremque
        ea excepturi id molestiae nam nihil, numquam officiis omnis porro quisquam repellendus reprehenderit rerum
        tempore temporibus?
    </div>
    <div>Aspernatur in iste minima modi perferendis temporibus, voluptatem! Ab, assumenda autem dolorem doloremque
        eaque enim eos incidunt nesciunt optio quisquam ratione recusandae reiciendis rerum sapiente sint sunt
        veniam voluptates voluptatum?
    </div>
    <div>Atque beatae blanditiis, debitis deserunt dolor doloremque dolorum ducimus eaque fugiat iure libero maxime
        modi molestiae numquam quae quia ratione repellat repellendus similique sint vitae voluptas voluptates!
        Maiores nesciunt, nostrum!
    </div>
    <div>Amet consequuntur cum cupiditate eos, error expedita fugit iste magnam magni non reprehenderit, velit
        voluptate voluptatibus? Animi commodi dolorem iusto. Dicta doloribus ducimus hic incidunt laborum rem velit
        veniam voluptatum.
    </div>
    <div>Ab animi, aperiam architecto consequatur cupiditate dolores est ipsum minima numquam optio perferendis
        praesentium quod, reprehenderit ullam vero voluptate voluptatum. Accusamus consequuntur cupiditate dicta in
        ipsa magnam mollitia quia quo!
    </div>
    <div>Ab accusantium aliquam corporis dicta distinctio esse eum ex illum incidunt, libero molestias nesciunt
        nihil ratione repellat ullam velit veritatis? Corporis deserunt laboriosam nostrum reprehenderit sapiente!
        Eligendi iure nisi repellendus!
    </div>
    <div>Amet architecto blanditiis consequuntur dignissimos distinctio, dolorem doloremque, in quae quidem quos
        ratione rem sint. Ab ad at delectus dignissimos dolor eius, maiores maxime perferendis praesentium provident
        quaerat, qui ratione.
    </div>
    <div>Ducimus eius eum nulla numquam placeat porro possimus quia ratione recusandae? Ab accusantium atque culpa
        cum distinctio eos, est exercitationem expedita laborum molestiae obcaecati, quas quia quibusdam soluta
        ullam voluptate!
    </div>
    <div>Eius esse est et id laudantium libero neque rem reprehenderit suscipit tempora? A ad animi aperiam est
        facere harum hic itaque minus mollitia officia omnis quaerat quia similique veniam, veritatis?
    </div>
    <div>Accusamus ad aliquid culpa debitis dolores eos, hic, impedit, ipsam maxime minima neque nesciunt nisi nulla
        numquam odit perspiciatis quis ratione repellat sapiente tempore. Beatae facere fuga praesentium reiciendis
        veritatis.
    </div>
    <div>Ad aliquam consectetur, debitis delectus dignissimos dolorem doloremque ducimus eaque eius esse facilis,
        illum ipsam libero magnam molestiae nesciunt nisi non odio placeat possimus reiciendis rem sit suscipit
        velit vitae.
    </div>
    <div>Adipisci cupiditate distinctio fugit maxime porro quas sapiente totam voluptate! Delectus eos explicabo
        fugiat inventore minus quae quod quos repudiandae saepe voluptas! Accusantium animi cupiditate facere illum
        neque sed voluptas?
    </div>
    <div>Accusamus aperiam, blanditiis corporis culpa deleniti distinctio, doloremque doloribus ea est eveniet ex id
        in ipsam iure iusto laboriosam mollitia nam non nulla odio optio perspiciatis possimus quis saepe voluptas.
    </div>
    <div>Culpa et mollitia sint ut. Ab accusantium at autem consequatur delectus doloribus, eum fuga fugit incidunt
        laboriosam non nulla placeat quae quam quas reiciendis repellat soluta sunt voluptas voluptate voluptates.
    </div>
    <div>Aliquam consectetur deleniti enim, est, eveniet laboriosam maxime mollitia nisi nulla odit porro, quidem
        recusandae tempora ullam vitae? Cum debitis dignissimos exercitationem ipsum laborum non quaerat quos rem
        sit totam?
    </div>
    <div>Culpa deserunt earum eligendi eos ipsum minus quam. Ab asperiores deserunt distinctio eligendi est eveniet,
        illum ipsam iste iure, libero magnam molestias, natus nesciunt porro quod ratione repellendus sit tempore.
    </div>
    <div>Debitis, nisi, quasi? Aliquid animi consequatur distinctio dolorum fuga fugit modi natus nisi perferendis
        quam quo sapiente sit suscipit, ullam veniam vero vitae! Consectetur fugiat nobis quae quisquam repudiandae
        voluptate.
    </div>
    <div>Accusamus earum necessitatibus nesciunt totam! Aperiam atque beatae corporis, earum eum, eveniet, hic iste
        odit possimus qui quibusdam quod saepe suscipit totam ut veniam voluptate? Accusantium dicta eum nobis
        soluta?
    </div></div>
<script>
    let btnE = document.querySelector('#btn');
    btnE.addEventListener('click',function(){
        alert('点击了按钮2');
    })

    let spanE = document.querySelector('span');
    spanE.addEventListener('mouseover',function(){
        console.log('访问了span元素');
    })

    window.addEventListener('scroll',function(){
        console.log('页面被滚动了');
    })
    window.addEventListener('resize',function(){
        console.log('页面被重置大小了');
    })

    document.addEventListener('visibilitychange',function(){
        if (document.visibilityState == 'visible'){
            console.log('用户回到了页面');
        }else{
            console.log('用户离开了页面');
        }
    })

</script>
</body>
</html>